import React, {PureComponent} from 'react';
import {connect} from 'dva';
import {
    Form, Input, Button, Card, Select, Radio
} from 'antd';
import {message} from "antd/lib/index";
import {fakeSubmitForm} from "../../services/api";
const FormItem = Form.Item;
const userInfoState = sessionStorage.getItem("userInfoState");
const RadioGroup = Radio.Group;

@connect(state => ({
    rule: state.serviceEdit
}))
@Form.create()
export default class ServiceEdit extends PureComponent {

    handleParentModalVisible = (e) => {
        this.props.handleModalVisible();
    }

    handleSubmit = (editType,service_id,e) => {
        this.props.form.validateFieldsAndScroll((err, values) => {
            if (!err) {
                this.props.dispatch({
                    type: `serviceEdit/${editType}`,
                    payload: {...values,service_id: service_id},
                    callback: (response) => {
                        if (response.result === 0) {
                            message.success('提交成功');
                            this.props.handleModalVisible();
                            this.props.handleModalSuccess(this.props.pagination);
                        } else {
                            message.error('提交失败');
                        }
                    }
                });
            }
        });
    }

    render() {
        const {submitting, record, editType } = this.props;
        const {getFieldDecorator, getFieldValue} = this.props.form;
        const formInitValue = editType === 'add' ? {is_check_login: 1,is_log: 1} : record;
        const service_id = editType === 'add' ? '' : record.service_id;
        console.log(formInitValue.service_status);
        const formItemLayout = {
            labelCol: {
                // xs: {span: 24},
                sm: {span: 5},
            },
            wrapperCol: {
                // xs: {span: 24},
                sm: {span: 16},
                // md: {span: 40},
            },
        };
        const submitFormLayout = {
            wrapperCol: {
                xs: {span: 24, offset: 0},
                sm: {span: 10, offset: 7},
            },
        };

        return (
            <Card bordered={false}>
                <Form
                    onSubmit={this.handleSubmit}
                    hideRequiredMark
                >
                    <FormItem
                        {...formItemLayout}
                        label="服务名称"
                    >
                        {getFieldDecorator('service_name', {
                            initialValue:  formInitValue.service_name || '',
                            rules: [{
                                // required: true, message: '请输入商品服务名称',
                            }],
                        })(
                            <Input placeholder="请输入服务名称"   disabled = {editType == "add" ? false : true}/>
                        )}
                    </FormItem>
                    <FormItem
                        {...formItemLayout}
                        label="服务方法"
                    >
                        {getFieldDecorator('service_method_name', {
                            initialValue:  formInitValue.service_method_name || '',
                            rules: [{
                                // required: true, message: '请输入商品服务方法',
                            }],
                        })(
                            <Input placeholder="请输入服务方法" disabled = {editType == "add" ? false : true}/>
                        )}
                    </FormItem>
                    <FormItem
                        {...formItemLayout}
                        label="服务版本"
                    >
                        {getFieldDecorator('service_version', {
                            initialValue:  formInitValue.service_version || '',
                            rules: [{
                                required: true, message: '请输入商品服务版本',
                            }],
                        })(
                            <Input placeholder="请输入服务版本" disabled = {editType == "add" ? false : true}/>
                        )}
                    </FormItem>
                    <FormItem
                        {...formItemLayout}
                        label="服务URI"
                    >
                        {getFieldDecorator('service_uri', {
                            initialValue:  formInitValue.service_uri || '',
                            rules: [{
                                required: true, message: '请输入商品服务URI',
                            }],
                        })(
                            <Input placeholder="请输入服务URI" disabled = {editType == "add" ? false : true}/>
                        )}
                    </FormItem>
                    <FormItem
                        {...formItemLayout}
                        label="服务URL"
                    >
                        {getFieldDecorator('service_url', {
                            initialValue:  formInitValue.service_url || '',
                            rules: [{
                                required: true, message: '请输入商品服务URL',
                            }],
                        })(
                            <Input placeholder="请输入服务URL" disabled = {editType == "add" ? false : true}/>
                        )}
                    </FormItem>
                    <FormItem
                        {...formItemLayout}
                        label="状态"
                    >
                        {getFieldDecorator('service_status', {
                            initialValue: formInitValue.service_status || 0 ,
                            rules: [{
                                required: true, message: '请选择状态',
                            }],
                        })(
                            <Select placeholder="请选择" style={{width: '100%'}} disabled = {editType == "add" ? false : true} >
                                {/*<Option value={-1}>请选择</Option>*/}
                                <Option value={0}>不可用</Option>
                                <Option value={1}>可用</Option>
                            </Select>
                        )}
                    </FormItem>
                    <FormItem
                        {...formItemLayout}
                        label="服务模块"
                    >
                        {getFieldDecorator('servcie_modular', {
                            initialValue:  formInitValue.servcie_modular || '',
                            rules: [{
                                required: true, message: '请输入商品服务模块',
                            }],
                        })(
                            <Input placeholder="请输入服务模块" disabled = {editType == "add" ? false : true}/>
                        )}
                    </FormItem>
                    <FormItem
                        {...formItemLayout}
                        label="支持终端类型"
                    >
                        {getFieldDecorator('service_terminal', {
                            initialValue:  formInitValue.service_terminal || '',
                            rules: [{

                            }],
                        })(
                            <Input placeholder="请输入支持终端类型" disabled = {editType == "add" ? false : true}/>
                        )}
                    </FormItem>
                    <FormItem
                        {...formItemLayout}
                        label="api说明"
                    >
                        {getFieldDecorator('service_desc', {
                            initialValue:  formInitValue.service_desc || '',
                            rules: [{

                            }],
                        })(
                            <Input placeholder="请输入api说明" />
                        )}
                    </FormItem>
                    <FormItem
                        {...formItemLayout}
                        label="是否登录验证"
                    >
                        {getFieldDecorator('is_check_login', {initialValue: formInitValue.is_check_login})(
                            <RadioGroup>
                                <Radio value={1}>是</Radio>
                                <Radio value={0}>否</Radio>
                            </RadioGroup>
                        )}
                    </FormItem>
                    <FormItem
                        {...formItemLayout}
                        label="是否记录日志"
                    >
                        {getFieldDecorator('is_log', {initialValue: formInitValue.is_log})(
                            <RadioGroup>
                                <Radio value={1}>是</Radio>
                                <Radio value={0}>否</Radio>
                            </RadioGroup>
                        )}
                    </FormItem>

                    <FormItem {...submitFormLayout} style={{marginTop: 32}}>
                        <Button type="primary" onClick={this.handleSubmit.bind(this,editType,service_id)}>
                            提交
                        </Button>
                        <Button style={{marginLeft: 8}} onClick={this.handleParentModalVisible}>取消</Button>
                    </FormItem>
                </Form>
            </Card>
        );
    }
}
